<style type="text/css">

	.layui-table-cell {
		height: auto;
	}
	td .laytable-cell-checkbox{
		line-height: 56px;
	}

</style>
<div class="layui-fluid nepadmin-pad0 nepadmin-mar0 list0 device" id="list" lay-title="设备管理">
	<div class="layui-fluid">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md12">
				<div class="layui-card hxr-layui-card" id="listv">
					<div class="layui-form hxradmin-card-header">
						<div class="layui-form-item">

							<div class="layui-inline">
								<label class="layui-form-label">设备ID搜索</label>
								<div class="layui-input-inline">
									<input type="text" name="device_id" placeholder="请输入设备ID搜索" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label">关键词查询</label>
								<div class="layui-input-inline">
									<input type="text" name="user" placeholder="设备名称/设备编号/代理名称" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-inline">
							  <label class="layui-form-label">设备分组</label>
							  <div class="layui-input-block">
							      <div class="layui-unselect layui-form-select">
							      	<div class="layui-select-title"><input verify="require" type="text" name='group_idl' placeholder="请选择分组" class="layui-input layui-unselect" readonly @click="group_list"><i
							      		 class="layui-edge"></i></div>
							      	<dl class="layui-anim layui-anim-upbit">
							      		<dd class="layui-select-tips layui-this">请选择</dd>
							      		<dd :data='x.device_group_id' v-for="(x,index) in group">{{x.device_group_name}}</dd>
							      	</dl>
							      </div>
							  </div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label" style="width:90px;">设备模式</label>
								<div class="layui-input-inline">
									<div class="layui-unselect layui-form-select">
										<div class="layui-select-title"><input name="usage_mode" type="text" placeholder="选择状态" value="" readonly class="layui-input layui-unselect"><i
											 class="layui-edge"></i></div>
										<dl class="layui-anim layui-anim-upbit" style="">
											<dd lay-value="" class="layui-select-tips layui-this">选择模式</dd>
											<dd data='1'>校园模式</dd>
											<dd data='2'>酒店模式</dd>
										</dl>
									</div>
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label" style="width:90px;">代理分配状态</label>
								<div class="layui-input-inline">
									<div class="layui-unselect layui-form-select">
										<div class="layui-select-title"><input name="agent_status" type="text" placeholder="选择状态" value="" readonly class="layui-input layui-unselect"><i
											 class="layui-edge"></i></div>
										<dl class="layui-anim layui-anim-upbit" style="">
											<dd lay-value="" class="layui-select-tips layui-this">选择状态</dd>
											<dd data='1'>未分配</dd>
											<dd data='2'>已分配</dd>
										</dl>
									</div>
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label"  style="width:90px;">网卡分配状态</label>
								<div class="layui-input-inline">
									<div class="layui-unselect layui-form-select">
										<div class="layui-select-title"><input name="network_card_status" type="text" placeholder="选择状态" value="" readonly class="layui-input layui-unselect"><i
											 class="layui-edge"></i></div>
										<dl class="layui-anim layui-anim-upbit" style="">
											<dd lay-value="" class="layui-select-tips layui-this">选择状态</dd>
											<dd data='1'>未分配</dd>
											<dd data='2'>已分配</dd>
										</dl>
									</div>
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label">计费状态</label>
								<div class="layui-input-inline">
									<div class="layui-unselect layui-form-select">
										<div class="layui-select-title"><input name="cost_status" type="text" placeholder="选择状态" value="" readonly class="layui-input layui-unselect"><i
											 class="layui-edge"></i></div>
										<dl class="layui-anim layui-anim-upbit" style="">
											<dd lay-value="" class="layui-select-tips layui-this">选择状态</dd>
											<dd data='0'>未计费</dd>
											<dd data='1'>待计费</dd>
											<dd data='2'>计费中</dd>
										</dl>
									</div>
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label">绑定状态</label>
								<div class="layui-input-inline">
									<div class="layui-unselect layui-form-select">
										<div class="layui-select-title"><input name="bind_status" type="text" placeholder="选择状态" value="" readonly class="layui-input layui-unselect"><i
											 class="layui-edge"></i></div>
										<dl class="layui-anim layui-anim-upbit" style="">
											<dd lay-value="" class="layui-select-tips layui-this">选择状态</dd>
											<dd data='0'>未激活</dd>
											<dd data='1'>未绑定</dd>
											<dd data='2'>待确认</dd>
											<dd data='3'>已绑定</dd>
										</dl>
									</div>
								</div>
							</div>
							<div class="layui-inline">
								<button class="layui-btn" data-type="reload" id="search">搜索</button>
							</div>
							<div class="layui-inline">
								<button class="layui-btn" data-type="excel" id="pexcel">导出数据</button>
							</div>
							<div class="layui-inline">
								<div class="layui-btn layuiadmin-btn-list" id="put_ercode" >导出设备码</div>
							</div>
						</div>
					</div>
					<div class="layui-card-body">
						<div id="tool" style="display: none" type="text/html">
							<button class="layui-btn layuiadmin-btn-list" data-type="batchdel">删除</button>
							<button class="layui-btn layuiadmin-btn-list" data-type="add">添加</button>
							<button class="layui-btn layuiadmin-btn-list" data-type="fenpei">分配代理</button>

						</div>
						<table class="layui-hide" id="list-table" lay-filter="list-table"></table>
						
					</div>
				</div>
				<div id="list-toolbar" style="display: none;" type="text/html">
					<div>
						<a class="layui-btn layui-bg-cyan layui-btn-xs" lay-event="dayin" data='{{d.qr_code}}'>打印设备码</a>
						{{#  if(!d.agent_name){ }}
						<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
						<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
						{{#  } }}
						{{#  if(d.agent_name ){ }}
							{{#  if( d.usage_mode_name=='酒店模式'){ }}
							<a class="layui-btn layui-bg-cyan layui-btn-xs" lay-event="room_fenpei">房号编辑</a>
							{{#  } }}
						{{#  } }}

						{{#  if(d.cost_status==2){ }}
						<button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="stop">停止使用</button>
						{{#  } }}
						<button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="distribution"><i class="layui-icon layui-icon-list"></i>分配记录</button>
					</div>
					<div >
						{{#  if(d.bind_status==0){ }}
							<a class="layui-btn layui-bg-cyan layui-btn-xs" lay-event="jihuo">激活</a>
						{{#  } }}

						{{#  if(d.agent_name){ }}
							<a class="layui-btn layui-bg-orange layui-btn-xs" lay-event="fenpei">更换代理</a>
							<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="huishou">回收</a>
						{{#  } else{ }}

							{{#  if(d.network_card_id){ }}
								<a class="layui-btn layui-bg-orange layui-btn-xs" lay-event="peizhi">更换板卡</a>
							{{#  } else{ }}
								<a class="layui-btn layui-btn-normal layui-btn-xs"   lay-event="peizhi">配置板卡</a>
							{{#  } }}

							{{#  if(d.bind_status!=0){ }}
								<a class="layui-btn layui-bg-cyan layui-btn-xs" lay-event="fenpei">分配代理</a>
							{{#  } }}
						{{#  } }}



					<a class="layui-btn layui-bg-green layui-btn-xs" lay-event="openbj" >开启报警</a>
					<a class="layui-btn layui-bg-cyan layui-btn-xs" lay-event="endbj">关闭报警</a>
					</div>
					
				</div>
				<script type="text/html" id="list-tableF">
					<input type="checkbox" name="online_sta" lay-skin="switch" lay-text="开启|关闭" lay-filter="list-tableF"
				   value="{{d.module_status}}" data-json="{{ encodeURIComponent(JSON.stringify(d)) }}" {{ d.module_status == 1 ? 'checked' : '' }}>
				</script>
				<script type="text/html" id="is_unpacking">
						   {{#  if(d.is_unpacking === 1){ }}
								<span class="layui-badge-rim">否</span>
						   {{#  } else{ }}
						      <span class="layui-badge layui-bg-green">是</span>
						   {{#  } }}
				</script>
				<script type="text/html" id="list-tableFs">
					<input type="checkbox" name="online_sta" lay-skin="switch" lay-text="开启|关闭" lay-filter="list-tableFs"
				   value="{{d.alarm_status}}" data-json="{{ encodeURIComponent(JSON.stringify(d)) }}" {{ d.alarm_status == 1 ? 'checked' : '' }}>
				</script>
				<script type="text/html" id="online_status">
					{{#  if(d.online_status === 1){ }}
								<span class="layui-badge layui-bg-green">在线</span>
					{{#  } else if(d.online_status === 2||d.online_status === 0) { }}
					  <span class="layui-badge-rim">离线</span>
					{{#  } }}
				</script>
				<script type="text/html" id="cost_status">
					{{#  if(d.cost_status === 0){ }}
								<span class="layui-badge-rim">未计费</span>
					{{#  } else if(d.cost_status === 1) { }}
					  <span class="layui-badge layui-bg-green">待计费</span>
					  {{#  } else if(d.cost_status === 2) { }}
					    <span class="layui-badge">计费中</span>
					{{#  } }}
				</script>
				<script type="text/html" id="bind_status">
					{{#  if(d.bind_status === 0){ }}
								<span class="layui-badge-rim">未激活</span>
					{{#  } else if(d.bind_status === 1) { }}
					  <span class="layui-badge layui-bg-green">未绑定</span>
					  {{#  } else if(d.bind_status === 2) { }}
					    <span class="layui-badge layui-bg-cyan">待确认</span>
						{{#  } else if(d.bind_status === 3) { }}
						  <span class="layui-badge">{{d.real_name}}已绑定</span>
					{{#  } }}
				</script>
				<script type="text/html" id="device_m">

					<img style="max-width: 80%;max-height: 100%;" src="{{d.qr_code}}"  onclick="previewImg(this)">
				</script>
			</div>
		</div>
	</div>
</div>
<script>
	var userlist = new Vue({
		el: '#listv',
		data: {
			group:'',
		},
		methods:{
			group_list:function(){
				var _this=this;
				if(!this.group){
					layui.admin.ajax('device/group_list',{},1).then(function(res){
						_this.group=res.data.list;
					});
				}
			},
		}
	});
	var formurl = 'device/deviceform',
		formarea = ['500px', '600px'];
	//表格数据渲染
	layui.use(['table', 'form'], function() {
		var table = layui.table,
			form = layui.form,
			$ = layui.$;
		layui.admin.initlist(table, 'device/list', 320, [
			[
				{
					type: 'checkbox',

				}, {
					field: 'device_id',
					title: 'ID',
					width: 160
				},{
					field: 'device_m',
					title: '设备码',
					width: 80,
					templet:'#device_m'
				},{
					field: 'device_sn',
					title: '设备编号',
					width: 170
				}, {
					field: 'device_name',
					title: '设备名称',
					width: 150
				}, {
					field: 'usage_mode_name',
					title: '模式',
					width: 150
				},{
					field: 'device_group_name',
					title: '设备分组',
					minWidth: 150
				}, {
					field: 'rule_name',
					title: '计费规则',
					minWidth: 150
				},{
					field: 'hotel_name',
					title: '酒店计费规则',
					minWidth: 150
				},{
					field: 'cpu_name',
					title: 'cpu',
					width: 150
				,hide:true
				},{
					field: 'video_card_name',
					title: '显卡',
					width: 150
				,hide:true
				},{
					field: 'memory_name',
					title: '内存条',
					width: 150
				,hide:true
				},
				{
					field: 'monitor_name',
					title: '显示器',
					width: 150
					,hide:true
				},{
					field: 'storage_name',
					title: '存储',
					width: 150
				,hide:true
				},{
					field: 'mainboard_name',
					title: '主板',
					width: 150
				,hide:true
				},{
					field: 'online_status',
					title: '在线状态',
					width: 100,
					templet: '#online_status',
				},{
					field: 'cost_status',
					title: '计费状态',
					width: 100,
					templet: '#cost_status',
				},{
					field: 'bind_status',
					title: '绑定状态',
					width: 100,
					templet: '#bind_status',
				}, {
					field: 'total_time',
					title: '使用总时长',
					width: 120
				}, {
					field: 'valid_time',
					title: '有效时长',
					width: 120
				}, {
					field: 'invalid_time',
					title: '无效时长',
					width: 120
				}, {
					field: 'now_count_time',
					title: '当前使用时长',
					width: 120,
					fixed:'right'
				}, {
					field: 'room',
					title: '房间号',
					width: 120
				}, {
					field: 'agent_name',
					title: '代理名称',
					width: 120
				},/* {
					field: 'agent_cost_rate',
					title: '设备成本费率(%)',
					width: 120
				},*/ {
					field: 'withdraw_proportion',
					title: '代理佣金费率(%)',
					width: 120
				},{
					field: 'breach',
					title: '违约金(元)',
					width: 100
				}, {
					field: 'day_income',
					title: '当日收益(元)',
					width: 110
				}, {
					field: 'month_income',
					title: '当月收益(元)',
					width: 110
				}, {
					field: 'total_income',
					title: '总收益(元)',
					width: 100
				},{
					field: 'product_key',
					title: '设备产品key',
					width: 150
				,hide:true
				},{
					field: 'device_name_key',
					title: '设备证书',
					width: 150
				,hide:true
				},{
					field: 'mac_id',
					title: 'macid',
					width: 150
				},{
					field: 'iot_name',
					title: '模块类型',
					width: 100
					,hide:true
				}, {
					field: 'device_desc',
					title: '设备信息',
					minWidth: 200
				},{
				field: 'is_unpacking',
				title: '是否开箱',
				width: 90,
				templet: '#is_unpacking',
				fixed:'right',
			}, {
				field: 'three_day_time',
				title: '近三天使用时长',
				width: 130,
				fixed:'right'
			},
				/* {
					field: 'module_status',
					title: '模块状态',
					width: 95,
					templet: '#list-tableF',
					fixed:'right'
				}, */
				/*{
					field: 'alarm_status',
					title: '警报状态',
					width: 95,
					templet: '#list-tableFs',
					fixed:'right'
				},*/
				{
					title: '操作',
					toolbar: '#list-toolbar',
					width: 450,
					fixed:'right'
				}
			]
		],'','','','','',true,20,'#tool');
		//监听表格表单操作
		form.on('switch(list-tableF)', function(obj) {
			var json = JSON.parse(decodeURIComponent($(this).data('json')));
			json = table.clearCacheKey(json);
			layui.admin.ajax('device/update',{
				module_status:json.module_status==1?2:1,
				device_id:json.device_id
			}).then((res) => {
				layui.table.reload('list-table');
			}).catch((res) => {});
		});
		/*form.on('switch(list-tableFs)', function(obj) {
			var json = JSON.parse(decodeURIComponent($(this).data('json')));
			json = table.clearCacheKey(json);
			layui.admin.ajax('device/alarm',{
				alarm_status:json.alarm_status==0?1:0,
				device_id:json.device_id
			}).then((res) => {
				layui.table.reload('list-table');
			}).catch((res) => {});
		});*/

		//监听表格操作事件
		table.on('tool(list-table)', function(obj) {
			var data = obj.data;
			//删除
			if (obj.event === 'del') {
				layer.confirm('确定删除' + data.device_name + '?', function(index) {
					layui.admin.delF(table, 'device/delete', {
						device_id: data.device_id
					});
				});
			} else if (obj.event === 'edit') { //编辑
				layui.admin.pupF('编辑设备', formarea, formurl, 2, data)
			} else if (obj.event === 'fenpei') { //编辑
				layui.admin.device=data;
				layui.admin.pupF('分配代理', ['800px','600px'], 'agent/agentselect',3);
			}else if(obj.event === 'dayin'){
				var newWindow=window.open("打印窗口","_blank");
				var docStr = obj.innerHTML;
				newWindow.document.write('<div style="height: 90vh;display: flex;align-items: center;justify-content: center;"><img src="'+$(this).attr("data")+'"/></div>');
				newWindow.document.close();
				newWindow.print();
				newWindow.close();
			}else if(obj.event === 'huishou'){
				layer.confirm('确定回收' + data.device_name + '?', function(index) {
					layui.admin.ajax('device/recovery',{
						device_id:data.device_id
					}).then((res) => {
						layui.table.reload('list-table');
					});
				});
			}else if(obj.event === 'peizhi'){
				layui.admin.device=data;
				layui.admin.pupF('选择网卡', ['800px','600px'], 'device/networkselect',3);
			}else if(obj.event === 'jihuo'){
				layer.confirm('确定激活' + data.device_name + '?', function(index) {
					layui.admin.delF(table, 'device/activate', {
						device_id: data.device_id,
						status:1
					});
				});
			} else if (obj.event === 'distribution'){//充值记录
				layui.admin.pupF(data.device_name+'的分配记录',['700px', '600px'],'device/distribution_list',2,data)
			}else if(obj.event === 'stop'){
				layer.confirm('确定停止' + data.device_name + '?', function(index) {
					layui.admin.ajax('device/deact_apply',{
						device_id:data.device_id
					}).then((res) => {
						layui.table.reload('list-table');
					});
				});
			}else if(obj.event==='openbj'){
				layer.confirm('确认开启报警?', function(index) {
					layui.admin.ajax('device/alarm',{
						device_id:data.device_id,
						alarm_status:1
					}).then((res) => {
						layui.table.reload('list-table');
					});
				});
			}else if(obj.event==='endbj'){
				layer.confirm('确认关闭报警?', function(index) {
					layui.admin.ajax('device/alarm',{
						device_id:data.device_id,
						alarm_status:0
					}).then((res) => {
						layui.table.reload('list-table');
					});
				});
			}else if (obj.event==='room_fenpei'){
				var title=data.room?'修改酒店房间号':'添加酒店房间号';
				layer.open({
					title: title
					,content: '<input type="text" value="'+data.room+'" name="room">'
					,yes: function(){
						var room=$("input[name='room']").val();
						if (room!=data.room){
							layui.admin.ajax('device/room_edit',{
								device_id:data.device_id,
								room:room
							}).then((res) => {
								layui.table.reload('list-table');
							});
						}
						layer.closeAll();
					}
				});
			}
		});
		//监听行双击事件
		/* table.on('rowDouble(list-table)', function(obj) {
			//查看详情
			if($('.device').length){
				layui.admin.pupF('设备详情', formarea, formurl, 3, obj.data);
			}
		}); */
		var active = {
			//多行删除
			batchdel: function() {
					layui.admin.delsF(table, 'device/delete', 'device_id');
				}
				//添加
				,
			add: function(othis) {
				layui.admin.pupF('添加设备', formarea, formurl, 1, {})
			},
			fenpei:function(){
				var checkStatus = table.checkStatus('list-table').data;
				if(checkStatus.length){
					layui.admin.devices=checkStatus;
					layui.admin.pupF('分配代理', ['800px','600px'], 'agent/agentselect',4);
				}else{
					layer.msg('请选择设备');
				}
			}

		};
		//操作dom
		$('.layui-btn.layuiadmin-btn-list').on('click', function() {
			var type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		});
		//搜索
		$('#search').on('click', function() {
			var obj=$(this).parents('.layui-form-item');
			var val1 = obj.find('input[name="user"]').val(),
					val7=obj.find("input[name='device_id']").val(),
			val2 = obj.find('input[name="group_idl"]').attr('data'),
			val3 = obj.find('input[name="network_card_status"]').attr('data'),
			val4 = obj.find('input[name="agent_status"]').attr('data'),
			val5 = obj.find('input[name="cost_status"]').attr('data'),
			val6 = obj.find('input[name="bind_status"]').attr('data');
			val8 = obj.find('input[name="usage_mode"]').attr('data');
			layui.admin.reloads({
				search_text:val1,
				group_id:val2,
				network_card_status:val3,
				agent_status:val4,
				cost_status:val5,
				bind_status:val6,
				device_id:val7,
				usage_mode:val8
			});
		});
		$("#put_ercode").on('click',function () {
			var obj=$(this).parents('.layui-form-item');
			var val1 = obj.find('input[name="user"]').val(),
					val2 = obj.find('input[name="group_idl"]').attr('data'),
					val3 = obj.find('input[name="network_card_status"]').attr('data'),
			val4 = obj.find('input[name="agent_status"]').attr('data'),
			val5 = obj.find('input[name="cost_status"]').attr('data'),
			val6 = obj.find('input[name="bind_status"]').attr('data'),
			val7=obj.find("input[name='device_id']").val();
			var checkStatus = table.checkStatus('list-table').data;

			var conditiom="?1=1";
			if (val1){
				conditiom+="&search_text="+val1;
			}
			if (val2){
				conditiom+="&group_id="+val2;
			}
			if (val3){
				conditiom+="&network_card_status="+val3;
			}
			if (val4){
				conditiom+="&agent_status="+val4;
			}
			if (val5){
				conditiom+="&cost_status="+val5;
			}
			if (val6){
				conditiom+="&bind_status="+val6;
			}
			if (val7){
				conditiom+="&device_id="+val7;
			}
			if(checkStatus.length) {
				var id=[];
				for (var i=0;i<checkStatus.length;i++){
					checkStatus[i].device_id;
					id.push(checkStatus[i].device_id);
				}
				conditiom+="&device_ids="+id.join('-');
			}

			window.open("https://api.marsknight.com/admin/ercode_act/put_ercode"+conditiom)

		})
		//导出
		$('#pexcel').on('click', function() {
			var obj=$(this).parents('.layui-form-item');
			var val1 = obj.find('input[name="user"]').val(),
					val2 = obj.find('input[name="group_idl"]').attr('data'),
					val3 = obj.find('input[name="network_card_status"]').attr('data');
			val4 = obj.find('input[name="agent_status"]').attr('data');
			val5 = obj.find('input[name="cost_status"]').attr('data');
			val6 = obj.find('input[name="bind_status"]').attr('data');
			val7=obj.find("input[name='device_id']").val();
			layui.admin.excel(table,'device/list',
					{
						search_text:val1,
						group_id:val2,
						network_card_status:val3,
						agent_status:val4,
						cost_status:val5,
						bind_status:val6,
						device_id:val7
					},'');
		});
	});
    
    function previewImg(obj) {
        var img = new Image(),stra=parseInt(Math.random() * (1000000 + 1));
        img.src = obj.src;
        //var height = img.height + 50; // 原图片大小
        //var width = img.width; //原图片大小
        var imgHtml = "<img src='" + obj.src+"?"+stra+"' width='auto' height='auto'/>";
		var height = '580px';
		var width = '430px';
				//弹出层
        layer.open({  
            type: 1,  
            shade: 0.8,
            offset: 'auto',
            area: [width,height],  // area: [width + 'px',height+'px']  //原图显示
            shadeClose:true,
            scrollbar: false,
            title: "图片预览", //不显示标题  
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响  
            cancel: function () {  
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });  
            }  
        }); 
    }
</script>
